<template>
  <div class="wrap">
    <header class="top">
      <img class="img" alt="" src="@/assets/images/logo.png" />
      <van-search shape="round" placeholder="搜索" />
      <van-button size="mini" class="btn" plain type="danger" round>打开App</van-button>
    </header>
    <div class="container">
      <nav class="nav">

        <van-tabs @click-tab="changeTop">
          <van-tab :title="item.name" :name="item.id" v-for="item in tabLists" :key="item.id"></van-tab>
        </van-tabs>
      </nav>
      <div class="bottom">
        <div class="left">
          <van-sidebar v-model="activeRightIndex" @change="clickLeft">
            <van-sidebar-item class="item" v-for="item in leftList" :title="item.name" />
          </van-sidebar>
        </div>
        <div class="right">

          <ul class="list">
            <!-- <li>{{ activeRight }}</li> -->
            <li v-for="(item,index) in albumsList" :key="item.id" @click="goDetail(item)">
              <span class="logo"><van-icon name="fire" color="red" v-if="index<3"/>{{ index+1 }}</span>
              <div class="box">
                <van-image class="img"
                  :src="`https://imagev2.xmcdn.com/${item.cover}!op_type=5&device_type=ios&name=web_meduim&upload_type=cover&magick=webp`" />
                <div class="txt">
                  <span class="title">{{ item.albumTitle }}</span>
                  <span>{{ item.salePoint }}</span>
                  <span class="spanleft"><van-icon color="gray" name="play-circle-o" />{{ item.playCount/100000000 }}亿 &nbsp
                    &nbsp<van-icon name="more-o" />{{ item.trackCount }}</span>
                </div>
              </div>
            </li>

          </ul>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import request from '@/api/paihangbang/paihangbang'

const activeRightIndex = ref(0);
const activeTopId = ref<number>(0);
// 存一级分类数据(横向)
const tabLists = ref<any[]>([]);
const leftList = ref<any>();
const rankingId = ref<any>()
const albumsList = ref<any>();

const router=useRouter();

// 点击去详情
const goDetail=(item:any)=>{
  console.log('点击了')
  console.log(item)
  router.push(`/playlist?id=${item.id}`)

}





// 左边点击,请求二级分类数据
const clickLeft = async () => {
  rankingId.value = leftList.value[activeRightIndex.value].rankingId
  // console.log(rankingId.value)
  let res = await request.reqTwolist(rankingId.value)
  // console.log('二级分类数据',res)
  albumsList.value = res.rankList[0].albums
  // console.log('啦啦啦啦', albumsList.value)
}



const getRight = async() => {
  // console.log('点击了', obj)
  rankingId.value = 100006
  let res = await request.reqTwolist(rankingId.value)
  // console.log('二级分类数据',res)
  albumsList.value = res.rankList[0].albums
}


// 顶部点击
const changeTop = (obj: any) => {
  // console.log('点击了', obj)
  activeTopId.value = obj.name
  leftList.value = tabLists.value[activeTopId.value]!.tabWraps
  // console.log('这是leftList', leftList.value)
  // 待修改
  clickLeft();
}



const getList = async () => {
  let res = await request.reList()
  tabLists.value = res.tabLists
  leftList.value = tabLists.value[0]!.tabWraps
  // console.log('请求回来的数据', res)
  // console.log(tabLists.value)

}

onMounted(() => {
  getList();
  getRight()
})

</script>

<style lang="less" scoped>


// van-tab van-tab--line van-tab--grow van-tab--active
// van-badge__wrapper van-sidebar-item__text
/deep/.van-tabs__line{
  // color:red;
  background-color: red;
}
// /deep/.van-sidebar-item__text {
//   background-color: red;
// }
.wrap {
  width: 100%;

  .top {
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    padding: 15px 15px 5px;
    // background-color: red;
    display: flex;
    align-items: center;

    .img {
      width: 140px;
      height: 30px;
    }

    .btn {
      height: 30px;
      width: 80px;
      // padding: 8px 10px;
    }
  }

  .container {
    width: 100%;
    height: 20px;
    margin-top: 10px;
    .nav {
      // width: 100%;
      height: 40px;
      background-color: gray;
    }

    .bottom {
      height: 600px;
      display: flex;

      .left {
        overflow-x:scroll;
        background-color: #f7f8fa;

        .item {
          border-bottom: 2px #d8d8d8 solid;
          text-align: center;
        }
      }

      .right { 
        flex: 1;
        overflow-y: scroll;

        .list {
          li {
            // background-color: blue;
            border-bottom: 1px solid rgb(205, 205, 205);
            height: 100px;
            display: flex;

            .logo {
              // background-color: green;
              width: 30px;
              text-align: center;
              padding: 5px;
              font-size: 5px;
            }

            .box {
              // background-color: aqua;
              flex: 1;
              display: flex;
              align-items: center;

              .img {
                width: 70px;
              }

              .txt {
                width: 260px;
                margin-left: 15px;

                .title {
                  font-size: 15px;
                  color: black;
                  overflow: hidden;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  /* 设置最大显示行数 */
                  -webkit-box-orient: vertical;
                  text-overflow: ellipsis;
                }

                span {
                  font-size: 10px;
                  padding: 2px;
                  color: gray;
                  display: block;
                }
              }

            }

          }
        }
      }
    }
  }

}
</style>